<template>
  <transition>
    <div class="foodWrap" ref="foodWrap">
      <div class="secondFood" style="margin-bottom:48px;">
        <div class="avart">
          <img :src="showfooddetial.image" alt="">
          <i class="iconfont icon-arrow-left" @click="back"></i>
        </div>
        <div class="title">{{showfooddetial.name}}</div>
        <p class="sellNum">
          <span class="count">月售{{showfooddetial.sellCount}}份</span>
           <span>好评率{{showfooddetial.rating}}%</span>
        </p>
        <div class="priceWrap">
          <span class="price">¥{{showfooddetial.price}} <del>¥{{showfooddetial.oldPrice}}</del></span>
          <transition name="fadeIn" >
            <span class="addToCart" @click="addToCart" v-show="!showfooddetial.count || showfooddetial.count == 0">加入购物车</span>
          </transition>
          <span class="cartControlWrap">
            <cart-control :food = "showfooddetial"></cart-control>
          </span>
        </div>
        <splite v-show="showfooddetial.info"></splite>
        <div class="info" v-show="showfooddetial.info">
          <h2>商家详情</h2>
          <p>{{showfooddetial.info}}</p>
        </div>
        <splite></splite>
        <div class="favourWrap">
          <!--<favour :foodFavour="showfooddetial.ratings"></favour>-->
          <select-type></select-type>
        </div>

      </div>
    </div>
  </transition>
</template>

<script>
  import BScroll from  'better-scroll';
  import cartControl from  'common/cartcontrol/cartcontrol';
  import splite from  'common/splite/splite';
//  import favour from  'common/favour/favour';
  import selectType from  'common/selectType/selectType';
  export default{
    props: {
      showfooddetial: {
        type: Object,
        default (){
          return {}
        }
      }
    },
    data(){
        return {
          foodShowFlag:false,
          addToCartFlag:true
        }
    },
    components:{
      cartControl,
      splite,
      selectType
    },
    methods:{
      scrollInit(){
          setTimeout( () => {
              if(!this.scroll){
                this.scroll = new BScroll(this.$refs.foodWrap,{
                  "click":true
                })
              }else{
                this.scroll.refresh();
              }
          },20)

      },
      back(){
        this.$emit("backClick","");
//        this.showfooddetial = {};
      },
      addToCart(){
          if(!this.showfooddetial.count){
            this.$set(this.showfooddetial,"count",1);
//            this.addToCartFlag = false;
          }else{
            this.showfooddetial.count++;
          }

      }
    }
  }
</script>

<style lang="scss">
  .foodWrap {
    position: fixed;
    left: 0;
    top: 0;
    bottom:48px;
    z-index:30;
    width: 100%;
    overflow: hidden;
    background: #fff;
    .avart{
      width:100%;
      padding-top:100%;
      position: relative;
      img{
        position: absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
      }
      .icon-arrow-left{
        position: absolute;
        padding:10px;
        font-size:12px;
        color:#fff;
        top:16px;
        left:16px;
      }
    }
    .title{
      margin:18px 0 8px 18px;
      font-size:14px;
      font-weight:700;
      color:rgb(7,17,27);
      line-height: 14px;
    }
    .sellNum{
      font-size:0;
      color:rgb(147,153,159);
      line-height: 10px;
      span{
        font-size:10px;
        margin-left:18px;
        &.count{
          margin-right:12px;
        }
      }
    }
    .priceWrap{
      margin:18px;
      position: relative;
      .price{
        font-size:14px;
        font-weight:700;
        color:rgb(240,20,20);
        line-height: 24px;
        del{
          font-size:10px;
          line-height:24px;
          font-weight:700;
          color:rgb(147,153,159);
        }
      }

      .addToCart{
        position: absolute;
        right:0;
        top:0;
        width:72px;
        height:24px;
        line-height: 24px;
        text-align:center;
        border-radius: 12px;
        font-size:10px;
        color:#fff;
        background: rgb(0,160,220);
        z-index:2;
        &.fadeIn-enter-active,&.fadeIn-leave-active{
          transition:all .2s;
        }
        &.fadeIn-enter,.fadeIn-leave-to{
          width:0;
          opacity: 0;
        }
      }
      .cartControlWrap{
        position: absolute;
        width:72px;
        height:24px;
        right:0;
        top:0;
      }
    }
    .info{
      padding:18px;
      h2{
        font-size:14px;
        color:rgb(7,17,27);
        line-height: 14px;
      }
      p{
        padding:6px 8px 0;
        font-size:12px;
        font-weight:200;
        color:rgb(77,85,93);
        line-height:24px;
      }
    }
    .favourWrap{
      padding:18px;
    }
  }
</style>
